<template>
  <div>
    <a-tag :color="color" style="font-size: 16px">
      <span v-if="stepOrder">{{ stepOrder }} | {{ stepId_dictText }} |</span>
      {{ materialCode }} | {{ materialName }}
    </a-tag>
  </div>
</template>

<script>
export default {
  name: 'BomDetailNode',
  inject: ['getNode'],
  data() {
    return {
      color: '',
      materialCode: '',
      materialName: '',
      stepOrder: '',
      stepId_dictText: ''
    }
  },
  mounted() {
    const node = this.getNode()
    const { color, materialCode, materialName, stepOrder, stepId_dictText } = node.getData()
    this.color = color
    this.materialCode = materialCode
    this.materialName = materialName
    this.stepOrder = stepOrder
    this.stepId_dictText = stepId_dictText
  }
}
</script>

<style scoped></style>
